<template>
  <div class="app-container">
    <section>
      <div>
        <span
          style="font-size:20px;font-weight: bold; display:block;margin-bottom: 20px;text-align: center;"
        >
          付款单
          <el-button size="mini" v-if="from.BillStatus==0" round>草稿</el-button>
        </span>
      </div>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form
          :inline="true"
          ref="from"
          :model="from"
          label-width="80px"
          class="demo-form-inline"
        >
          <div class="tabel">
            <el-form-item label="订单编号:">{{from.bianhao}}</el-form-item>
            <el-form-item label="供应商:">
              <el-input auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="制单人:">{{from.name}}</el-form-item>
            <el-form-item label="制单时间:">{{from.time}}</el-form-item>
            <el-form-item label="摘要:">
              <el-input auto-complete="off"></el-input>
            </el-form-item>
            <el-button type="success" round>审核</el-button>
            <el-button type="primary" round>保存</el-button>
          </div>
          <!-- <el-form-item>
            <el-button type="primary" @click="handleEdit()">新增商品</el-button>
          </el-form-item>-->
        </el-form>
      </el-col>
      <el-table :data="List" border style="width: 100%">
        <el-table-column prop="OrderType" label="结算方式" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.OrderType==1">现金</span>
              <span v-if="scope.row.OrderType==2">银行转账</span>
              <span v-if="scope.row.OrderType==3">微信</span>
              <span v-if="scope.row.OrderType==4">支付宝</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="PackUnitNo" label="付款金额" align="center"></el-table-column>
        <el-table-column prop="time" label="结算号" align="center"></el-table-column>
        <el-table-column prop="SKUInPrice" label="备注" align="center"></el-table-column>
      </el-table>

      <el-form :inline="true" ref="from" :model="from" label-width="80px" class="demo-form-inline">
        <el-form-item>
          <el-date-picker
            type="daterange"
            format="yyyy-MM-dd "
            value-format="yyyy-MM-dd "
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="订单编号:">
          <el-input auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">选择订单</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="skulist" border style="width: 100%; margin-top: 20px">
        <el-table-column prop="ProductId" label="订单编号" align="center"></el-table-column>
        <el-table-column prop="SKUName" label="单据日期" align="center"></el-table-column>
        <el-table-column prop="SKUUnitNo" label="单据金额" align="center"></el-table-column>
        <el-table-column prop="SKUSalePrice" sortable label="已付款" align="center"></el-table-column>
        <el-table-column prop="SKUUnitNo" label="未付款" align="center"></el-table-column>
        <el-table-column prop="SKUSalePrice" sortable label="本次付款" align="center"></el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script>
import { Gett_cg_PurchaseMoneyList } from "@/api/api";
import Config from "../../api/config";
export default {
  data() {
    return {
      skulist: [],
      editFormVisible: false,
      page: 1,
      pageSize: 20,
      total: 0,
      from: {
        OrderNo: "",
        Creater: "",
        CreateDate: "",
        SupplierName: "",
        Summary: "",
        BillStatus: ""
      },
      List: []
    };
  },
  created() {
    this.Gett_cg_PurchaseMoneyList();
  },
  methods: {
    //获取历史列表
    Gett_cg_PurchaseMoneyList() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: this.pageSize,
        OrderType: 2,
        OrderStatus: -1
      };
      Gett_cg_PurchaseMoneyList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("获取订单列表", vdata);
          self.List = vdata.DataList;
          this.from.OrderNo = self.List[0].OrderNo;
          this.from.CreateDate = self.List[0].CreateDate;
          this.from.SupplierName = self.List[0].SupplierName;

          self.total = vdata.TotalCount;
        }
        self.skulistLoading = false;
      });
    },
    //显示新增
    handleEdit: function() {
      this.editFormVisible = true;
      console.log(this.List);
    },

    addSubmit() {
      var vdata = this.jsonspr;
      this.List = vdata;
      console.log(this.List);
      this.editFormVisible = false;
    },

    handleSelectionChange(val) {
      console.log(val);
      this.jsonspr = val;
    }
  }
};
</script>
<style scoped>
.tabel {
  display: inline-block;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 90%;
}
.tabel .el-form-item {
  width: 30%;
  /* letter-spacing:8px; */
}
.tabel .el-button {
  padding: 0 20px;
  height: 30px;
}
.el-form-item--medium .el-form-item__content,
.el-form-item--medium .el-form-item__label {
  color: black;
}
</style>